/**
 *  @author :   JiGuangJie
 *  @date   :   2020/5/22
 *  @time   :   14:14
 *  @Email  :   530904731@qq.com
 */
import * as THREE from 'three';
import { Mesh, PerspectiveCamera, PlaneGeometry, Scene, WebGLRenderer } from "three";

export default class DrawRectDemo {

    private renderer: WebGLRenderer;
    private readonly _container: HTMLElement;

    // public constructor(innerWidth: number, innerHeight: number,container:HTMLElement) {
    public constructor() {
        this._container = document.getElementById('container') as HTMLElement;
        const {innerWidth, innerHeight} = window;
        // 创建Three.js 渲染器，并添加至body中
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(innerWidth, innerHeight);
        this._container.appendChild(this.renderer.domElement);

        // 创建Three.js场景
        let scene: Scene = new THREE.Scene();
        // 创建相机，并添加到场景中
        let camera: PerspectiveCamera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 4000);
        camera.position.set(0, 0, 3.333);
        scene.add(camera);

        // 创建一个矩形几何体，并添加到场景中
        let geometry: PlaneGeometry = new THREE.PlaneGeometry(1, 1);
        let mesh: Mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial());
        scene.add(mesh);
        // 渲染绘制
        this.renderer.render(scene, camera);
    }
}

new DrawRectDemo();